<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品优购</title>

    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/common.css" />
    <script>
        var search=document.querySelector('.search')
        document.onkeydown=function(e) {
                if (e.key===s) {
                    search.focus();
                }
        }
    </script>
  </head>
  <body>
    
      <!-- 导航栏 -->
    <nav>
        <div class="w">
            <div class="welcome">品优购欢迎您！ 请滚蛋</div>
            <a href="join.html" id="zhu_ce" target="_blank">免费注册</a>
            <div class="right_nav">
            <ul>
                <li><a href="">我的订单</a></li>
                <i>|</i>
                <li><a href="">我的品优购</a></li>
                <span></span>
                <i>|</i>
                <li><a href="">品优购会员</a></li>
                <i>|</i>
                <li><a href="">企业采购</a></li>
                <i>|</i>
                <li><a href="">关注品优购</a></li>
                <span></span>
                
                <i>|</i>
                <li><a href="">客户服务</a></li>
                <span></span>
                
                <i>|</i>
                <li><a href="">网页导航</a></li>
                <span></span>
                
            </div>
        </div>
    </nav>
    <!-- 头部 -->
     <div class="w">
        <header>
            <img class="logo" src="images/logo.png" alt="what can i say">
            <div class="search_lan">
                <input type="search" required="required" placeholder="语言开发" autocomplete="off " class="search"> 
                <input type="submit" value="搜索">
                <div class="search_text">
                    <ul>
                        <li><a href="" style="padding-left: 12px;">优惠购首发</a></li>
                        <li><a href="">亿元优惠</a></li>
                        <li><a href=""> 9.9元团购</a></li>
                        <li><a href="">每满99减30</a></li>
                        <li><a href="">办公用品</a></li>
                        <li><a href="">电脑</a></li>
                        <li><a href="">通信</a></li>
                    </ul>
                </div>
            </div>
            <div class="shoppingcar"><span></span><a href="">我的购物车</a> <a href="">></a></div>
            
        </header>
        <!-- 分类 -->
        <div class="class">
            <div class="red_box"><h4>全部商品分类</h4></div>
            <div class="shopping">
                <ul>
                    <li><a href="">服装城</a></li>
                    <li><a href="">美妆馆</a></li>
                    <li><a href="">传智超市</a></li>
                    <li><a href="">全球购</a></li>
                    <li><a href="">闪购</a></li>
                    <li><a href="">团购</a></li>
                    <li><a href="">拍卖</a></li>
                    <li><a href="">有趣</a></li>
                    
                </ul>
            </div>
        </div>
     </div>
     
     <!-- 广告 -->
      <div class="red_xian"></div>
      <div class="w">
        <div class="banner">
            <div class="list">
                <ul>
                    <li><a href="">家用电器</a><span>></span></li>
                    <li><a href="">手机，数码，通信</a><span>></span></li>
                    <li><a href="">电脑，办公</a><span>></span></li>
                    <li><a href="">家居，家具，家装，厨具</a><span>></span></li>
                    <li><a href="">男装、女装、童装、内衣</a><span>></span></li>
                    <li><a href="">个户化妆、清洁用品、宠物</a><span>></span></li>
                    <li><a href="">鞋靴、箱包、珠宝、奢侈品</a><span>></span></li>
                    <li><a href="">运动户外、钟表</a><span>></span></li>
                    <li><a href="">汽车、汽车用品</a><span>></span></li>
                    <li><a href="">母婴、玩具乐器</a><span>></span></li>
                    <li><a href="">食品、酒类、生鲜、特产</a><span>></span></li>
                    <li><a href="">医药保健</a><span>></span></li>
                    <li><a href="">图书、音像、电子书</a><span>></span></li>
                    <li><a href="">彩票、旅行、充值、票务</a><span>></span></li>
                    <li><a href="">理财、众筹、白条、保险</a><span>></span></li>
                </ul>
            </div>
            <div class="photo"></div>
            <aside>
                <div class="new">
                    <div class="title">
                        <h4>品优购快报</h4> <a href="">更多  ></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li><strong>[特惠]</strong><a href="">备战开学季 全民半价购数码</a></li>
                            <li><strong>[公告]</strong><a href="">品优稳占加点网购六成份额</a></li>
                            <li><strong>[特惠]</strong><a href="">百元中秋全屏类李娟限量领</a></li>
                            <li><strong>[公告]</strong><a href="">上品优生鲜 享阳澄湖大闸蟹</a></li>
                            <li><strong>[特惠]</strong><a href="">每日享折扣品优品质游</a></li>
                        </ul>
                        
                </div>
                <div class="sever">
                    <ul>
                        <li class="bg1"><a href="">话费</a></li>
                        <li class="bg2"><a href="">机票</a></li>
                        <li class="bg3"><a href="">电影票</a></li>
                        <li class="bg4"><a href="">游戏</a></li>
                        <li class="bg5"><a href="">彩票</a></li>
                        <li class="bg6"><a href="">加油卡</a></li>
                        <li class="bg7"><a href="">酒店</a></li>
                        <li class="bg8"><a href="">火车票</a></li>
                        <li class="bg9"><a href="">众筹</a></li>
                        <li class="bg10"><a href="">理财</a></li>
                        <li class="bg11"><a href="">礼品卡</a></li>
                        <li class="bg12"><a href="">白条</a></li>
                    </ul>
                </div>
                <div class="img"><a href=""><img src="images/bargain.png" alt=""></a></div>
            </aside>
        </div> 
        <div class="img_box">
            <div class="photo1"><img src="images/recom.png" alt=""></div>
            <div class="photo"><img src="images/recom_01.jpg" alt=""></div>
            <div class="photo"><img src="images/recom_02.jpg" alt=""></div>
            <div class="photo"><img src="images/recom_03.jpg" alt=""></div>
            <div class="photo"><img src="images/recom_04.jpg" alt=""></div>
                
        </div>
        <div class="guess_like">
            <div class="guess">
                <div class="head">猜你喜欢</div>
                <p>换一批</p>
                <span></span>
            </div>
            <div class="shoping">
                <div class="box" id="no">
                    <div class="img"><img src="images/152.png" alt=""></div>
                        <p class="no">阳光美包新款单肩包女</p>
                        <p>包时尚子母包四件套女</p>
                        <div class="peace"><span>¥</span><i>116.00</i></div>
                    
                </div>
                <div class="box">
                        <div class="img"><img src="images/153.png" alt=""></div>
                        <p class="no">爱仕达 30CM炒锅不粘</p>
                        <p>锅NWG8330E电磁炉炒</p>
                        <div class="peace"><span>¥</span><i>99.00</i></div>
                </div>
                <div class="box">
                    <div class="img"><img src="images/154.png" alt=""></div>
                        <p class="no">捷波朗 </p>
                        <p>（jabra）BOOSI劲步</p>
                        <div class="peace"><span>¥</span><i>245.00</i></div>
                </div>
                <div class="box">
                    <div class="img"><img src="images/156.png" alt=""></div>
                        <p class="no">欧普 </p>
                        <p>JYLZ08面板灯平板灯铝</p>
                        <div class="peace"><span>¥</span><i>238.00</i></div>
                </div>
                <div class="box">
                    <div class="img"><img src="images/157.png" alt=""></div>
                        <p class="no">三星</p>
                        <p>（G5500）移动联</p>
                        <div class="peace"><span>¥</span><i>649.00</i></div>
                </div>
                <div class="box">
                    <div class="img"><img src="images/158.png" alt=""></div>
                        <p class="no">韩国所望</p>
                        <p>紧致湿润精华露400ml</p>
                        <div class="peace"><span>¥</span><i>649.00</i></div>
                </div>
            </div>
        </div>    
        <!-- 商品      -->
        <div class="chuan_zhi_bo_ke">
            <div class="title">传智播客 有趣区</div>
            <div class="photo2">
                <div class="photo_box"><img src="images/interest01.png" alt=""></div>
                <div class="photo_box2">
                    <div class="title">好东西</div>
                    <div class="box1">
                       <dl>
                        <dt class="yang_shi">达人推荐</dt>
                        <dd class="yang_shi1">雷神金属机械键盘</dd>
                        <dd class="yang_shi2">与你相见恨晚</dd>
                       </dl>
                        <img class="yang_shi3" src="images/131.png" alt="">

                    </div>
                    <div class="box2">
                       <dl>
                        <dt class="yang_shi">发现好物</dt>
                        <dd class="yang_shi1">一不小心霸气外露</dd>
                        <dd class="yang_shi2">等你来</dd>
                       </dl>
                        <img class="yang_shi3" src="images/133.png" alt="">
                    </div>
                </div>
                <div class="photo_box3">
                    <div class="title">品牌街</div>
                    <div class="box3">
                       <dl>
                        <dt class="yang_shi">达人推荐</dt>
                        <dd class="yang_shi1">雷神金属机械键盘</dd>
                        <dd class="yang_shi2">与你相见恨晚</dd>
                       </dl>
                        <img class="yang_shi3" src="images/132.png" alt="">

                    </div>
                    <div class="photo_box4">
                        <div class="box4">
                            <dl>
                                <dt class="yang_shi">国际大牌</dt>
                                <dd class="yang_shi1">adidas</dd>
                                <dd class="yang_shi2">部分3免1</dd>
                            </dl>
                            <img class="yang_shi3" src="images/134.png" alt="">
                        </div>
                        <div class="box5">
                            <dl>
                                <dt class="yang_shi">本周特卖</dt>
                                <dd class="yang_shi1">大牌折扣</dd>
                                <dd class="yang_shi2">每周上新</dd>
                            </dl>
                            <img class="yang_shi3" src="images/135.png" alt=""><dl>
                        
                        </div>
                    </div>
                    
                    
                </div>
                <div class="photo_box5" >
                    <a href=""><img src="images/Snipaste_2025-01-09_15-14-39.png" alt=""></a>
                </div>
            </div>
        </div>
        <!-- 电气，手机，电脑 -->
        <div class="shang_pin">
            <div class="shang_pin_title">
                <h4>电脑办公</h4>
                <ul>
                    <li><a href="">热门</a></li>
                    <span>|</span>
                    <li><a href="">电脑/平板</a></li>
                    <span>|</span>

                    <li><a href="">潮流影音</a></li>
                    <span>|</span>

                    <li><a href="">智能/外设</a></li>
                    <span>|</span>

                    <li><a href="">DIY硬件</a></li>
                    <span>|</span>

                    <li><a href="">电竞游戏</a></li>
                    <span>|</span>

                    <li><a href="">办公/网络</a></li>
                    <span>|</span>

                    <li><a href="">文具电教</a></li>
                    <span>|</span>

                    <li style="padding-right: 15px;"><a href="">精选配件</a></li>
                </ul>
            </div>
            <div class="big_box">
                <div class="small_box">
                    <ul>
                        <li><a href="">SSD硬盘</a></li>
                        <li><a href="">显示器</a></li>
                        <li><a href="">机械键盘</a></li>
                        <li><a href="">台式机</a></li>
                        <li><a href="">组装电脑</a></li>
                        <li><a href="">配件专区</a></li>
                    </ul>
                </div>
                <div>
                    <h4>电脑特惠直降3000</h4>
                    <p>游戏本6期免息</p>
                    <img src="images/192.png" alt="">
                </div>
            </div>
            <div class="big_box1">
                <div>
                    <h4>大牌相机低价抢</h4>
                    <p>运动相机低至¥299</p>
                </div>
                <img src="images/193.png" alt="">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="big_box2">
                <div class="shang_pin_181">
                    <div>
                        <h4>平板新世界</h4>
                        <p>开启2IN1时代</p>
                    </div>
                
                <img src="images/197.png" alt="">
                </div>
                <div class="shang_pin_179">
                    <div>
                        <h4>低价来袭</h4>
                        <p>机械键盘低至99元</p>
                    </div>
                    <img src="images/195.png" alt="">
                </div>
            </div>
            <div class="big_box3" style="height: 360px;">
                <div>
                    <h4>全场6期免息</h4>
                    <p>我和DIY有个约会</p>
                </div>
                <img src="images/194.png" alt="">
            </div>
            <div class="big_box4">
                <div class="shang_pin_181">
                    <div>
                        <h4>消暑神器全场领劵</h4>
                        <p>1元赢空调</p>
                </div>
                
                <img src="images/115.png" alt="">
            </div>
                <div class="shang_pin_179">
                    <div>
                        <h4>潮流手配  尖叫来袭</h4>
                        <p>满99元减30元</p>
                    </div>
                    <img src="images/196.png" alt="">
                </div>
            </div>
            </div>
        </div>
    <div class="w">
        <div class="photo3"></div>
    </div>
      </div>
      <div class="fixed">
        <ul>
            <li><a href="">家用电器</a></li>
            <li><a href="">收集通讯</a></li>
            <li><a href="">电脑办公</a></li>
            <li><a href="">家居家具</a></li>
            <li><a href="">生活用品</a></li>
            <li><a href="">运动户外</a></li>
            <li><a href="">汽车用品</a></li>
            <li><a href="">食品酒类</a></li>
            <li><a href="">医药保健</a></li>
            <li><a href="">图书音像</a></li>
            <li><a href="">金融彩票</a></li>
            
        </ul>
      </div>
    
     
  </body>
</html>
